<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title> 3n + 1 Game </title>
    <style>
        .cols {
            display: flex;
        }

        .col {
            display: flex;
            flex-direction: column;
        }

        .col div {
            width: 48px;
            text-align: right;
            margin: 0;
            padding: 0;
            color: #999;
        }

        .col div.prime {
            font-weight: bolder;
            color: #f33;
        }
    </style>
</head>

<body>
    <div class="cols"></div>
    <script src="./primes.js"></script>
    <script>
        const COLS = document.getElementsByClassName('cols')[0];
        let COL = document.createElement("div");
        const ODDS = [];

        COL.className = "col";

        for (let i = 1; i < 10000; i += 1) {
            ODDS.push(i);
        }
        for (let i = 0; i < ODDS.length; i++) {
            let div = document.createElement("div");
            div.textContent = ODDS[i];
            if (PRIMES.has(ODDS[i])) {
                div.className = "prime";
            }
            COL.appendChild(div);
        }

        const paint = idx => {
            let LAST_CHILD = COLS.lastChild.childNodes;
            let CP = document.createElement("div");
            CP.className = "col";
            for (let i = 0; i < LAST_CHILD.length; i++) {
                if ((i-1) % idx != 0) {
                    CP.appendChild(LAST_CHILD[i].cloneNode(true));
                }
            }
            // debugger
            COLS.appendChild(CP);
        }

        COLS.appendChild(COL);
        // paint(2);
        // paint(3);
        for (let i = 2; i < 16; i++) {
            paint(i);
        }
    </script>
</body>

</html>